import React, { Component } from 'react';
import { connect } from 'dva';
import { SolveC, SolveHead, SolveContainer, SolveBrief, SolveBriefCol, SolveP, SolveImg, CloseIcon } from './Styled';

import addressIcon from '@/assets/images/dashborad/address.png';
import typeIcon from '@/assets/images/dashborad/type.png';
import timeIcon from '@/assets/images/dashborad/time.png';

const ShowItem = (WrapperComponent, analyse = false) => {
  @connect()
  class Com extends Component {
    close() {
      const { dispatch } = this.props;
      dispatch({
        type: "solved/showResolve",
        payload: "0"
      })
    }
    render() {
      const { data = {}, analyse = false } = this.props;
      let types = data.type === 1 ? 1 : 4;

      return (
        <SolveC analyse={analyse.toString()}>
          <SolveHead analyse={analyse.toString()}>处理详情</SolveHead>
          <CloseIcon type="close" onClick={() => this.close()}/>
          <SolveContainer analyse={analyse.toString()}>
            <SolveBrief>
              <SolveBriefCol width="60px" margin="0 50px 0 0">
                <SolveImg display="block" margin="10px auto" src={require(`../../assets/images/dashborad/type${analyse ? 'B' : ''}${types || 1}.png`)} alt="类型" />
                <SolveP analyse={analyse.toString()} align="center">{`${data.typeName}信息`}</SolveP>
              </SolveBriefCol>
              <SolveBriefCol width="750px" padding="0 0 0 50px" style={{ borderLeft: `1px solid ${analyse ? '#49a1ff' : '#04ffff'}` }}>
                <SolveP analyse={analyse.toString()}>{`已通知${data.statusName}`}</SolveP>
                <ul>
                  <li>
                    <SolveImg margin="0 10px 0 0" src={typeIcon} alt="类型"/>
                    {data.deviceName}
                  </li>
                  <li>
                    <SolveImg margin="0 10px 0 0" src={addressIcon} alt="地址"/>
                    {data.deviceLocation}
                  </li>
                  <li>
                    <SolveImg margin="0 10px 0 0" src={timeIcon} alt="时间"/>
                    {data.createTime}
                  </li>
                </ul>
              </SolveBriefCol>
            </SolveBrief>
            <WrapperComponent {...this.props} />
          </SolveContainer>
        </SolveC>
      )
    }
  }

  return Com;
}

export default ShowItem;
